header {
  background-color: $color-blue-bluedianne;
  background-size: 100% auto, cover;
  background-position: center bottom, center center;
  background-image: url($img-path + 'hero-bottom.png'), url($img-path + 'hero-bg.jpg');
  font-size: 40px;
  padding-top: 48px;
  padding-bottom: 470px;
  h1 {
    @include image-replace('logo', 'png', 172px, 103px);
    @include image-retina('logo', 'png', 172px, 103px);
    margin-bottom: 36px;
  }
  p {
    text-transform: uppercase;
  }
}

.overview {
  background-color: $color-blue-bluedianne;
  background-size: 100% auto, cover;
  background-position: center top, center center;
  background-image: url($img-path + 'overview-top.png'), url($img-path + 'overview-bg.jpg');
  padding-top: 114px;
  padding-bottom: 124px;
}

.demos {
  article {
    @include nested(9) {
      h2 {
        @include span(2.75);
      }
      ul {
        @include span(5.75);
        @include last;
        @include container(6);
        @include nested(6) {
          li {
            @include span(2);
            div {
              height: 410px;
            }
            h3 {
              &:before {
                margin-left: -83px;
              }
              &:after {
                @include image-replace('demo-headline-line', 'png', 166px, 5px);
                @include image-retina('demo-headline-line', 'png', 166px, 5px);
                margin-left: -83px;
              }
            }
            &.seafood h3:before {
              @include image-replace('demo-headline-seafood', 'png', 166px, 14px);
              @include image-retina('demo-headline-seafood', 'png', 166px, 14px);
            }
            &.bond h3:before {
              @include image-replace('demo-headline-bond', 'png', 166px, 21px);
              @include image-retina('demo-headline-bond', 'png', 166px, 21px);
            }
            &.marketplace h3:before {
              @include image-replace('demo-headline-marketplace', 'png', 166px, 25px);
              @include image-retina('demo-headline-marketplace', 'png', 166px, 25px);
            }
            p {
              margin: 18px 10%;
            }
            a {
              margin: 0 10% 18px;
              width: 80%;
            }
          }
        }
      }
    }
  }
}